import * as THREE from "three";
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'

/** 线材质 */
let lineMaterial = new LineMaterial({
  color: 0xdd2222,
  linewidth: 2,
  depthTest: false, //不进行深度测试.
})
lineMaterial.resolution.set(window.innerWidth, window.innerHeight);

/** 点材质 */
let pointMaterial = new THREE.PointsMaterial({
  color: 0xffffff,
  size: 12,
  sizeAttenuation: false
})
pointMaterial.onBeforeCompile = function (shader) {
  shader.fragmentShader = shader.fragmentShader.replace(
    // 原来的给片元赋值的代码替换为新的代码
    'outgoingLight = diffuseColor.rgb;',
    [
      'outgoingLight = diffuseColor.rgb;',
      //点方形区域像素与中心0.5, 0.5构成的半径
      'float r = distance(gl_PointCoord, vec2(0.5, 0.5));',
      //大于半径0.5的片元舍弃掉，实现方点变圆点的渲染效果
      'if(r>0.5)discard;',
      'gl_FragColor = vec4( outgoingLight, diffuseColor.a );',
    ].join('\n')
  );
};

/** 车道材质 */
let roadMaterial = new THREE.MeshLambertMaterial({
  color: 0x00ffff,
  side: THREE.FrontSide, //单面可见
  opacity: 0.6,
  transparent: true,
})
let selectRoadMaterial = new THREE.MeshLambertMaterial({
  color: 0xff0000,
  side: THREE.FrontSide, //单面可见
  opacity: 0.6,
  transparent: true,
})

export {
  roadMaterial,
  lineMaterial,
  pointMaterial,
  selectRoadMaterial
}